<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <base target="_blank">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/exam.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <Myheader></Myheader>
        <el-main>
            <div class="c900 h100">
                <el-container class="h100 flex" style="flex-direction: column">
                    <div style="flex-grow: 1; width: 100%; overflow-y: auto" >
                        <el-card v-for="p in page.records">
                            <div slot="header" class="flex">
                                <b>{{p.title}}</b>
                                <div>
                                    <el-button @click="location='exam.html?id='+p.id" style="padding: 3px 0" type="text">考试</el-button>
                                    <el-button @click="location='exam.html?look&id='+p.id" style="padding: 3px 0" type="text">查看</el-button>
                                    <el-button @click="location='paper.html?id='+p.id" style="padding: 3px 0" type="text">编辑</el-button>
                                    <el-button style="padding: 3px 0" type="text">删除</el-button>
                                </div>
                            </div>
                            <div class="grid4" style="grid-template-columns: 10% 30% 10% 40%">
                                <label>考试类型：</label><span>{{p.pwd?"需要密码":"完全公开"}}</span>
                                <label>总分：</label><span>{{p.scoreTotal}}</span>
                                <label>考试时间：</label><span>{{new Date(p.begin).toLocaleString()}}~
                                                             {{new Date(p.end).toLocaleString()}}</span>
                                <label>考试时长：</label><span>{{p.time}}分钟</span>
                            </div>
                        </el-card>
                    </div>
                    <el-pagination style="text-align: right; width: 100%;margin-bottom: 10px"
                            background
                            layout="prev, pager, next"
                            :total="1000">
                    </el-pagination>
                </el-container>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            where:{},
            page:{current:0, size:5, records:[]}
        },
        methods:{
            query(){
                axios.post(`paper/query?current=${this.page.current}&size=${this.page.size}`,
                            this.where).then(res=>{
                    this.page = res.data;
                });
            }
        },
        created(){
            this.query();
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    #app>.el-container>.el-main{
        overflow: hidden;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
        background-size: cover;
    }
    .el-main{
        padding: 0px 10px;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
</style>

</html>